<template>
  <div class="container-pie">
    <div ref="echartsBox" class="echarts-box"></div>
    <div class="status-text">{{ params.statusName }}</div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';

  const colorMap = [
    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
      { offset: 0, color: '#02CEFC' },
      { offset: 1, color: '#0272ED' },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
      { offset: 0, color: '#f87fd4' },
      { offset: 1, color: '#52cee2' },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
      { offset: 0, color: '#fcea1b' },
      { offset: 1, color: '#8ff193' },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
      { offset: 0, color: '#FC6679' },
      { offset: 1, color: '#8bb581' },
    ]),

    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
      { offset: 0, color: '#7FC268' },
      { offset: 1, color: '#0BBBB7' },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
      { offset: 0, color: '#E7B115' },
      { offset: 1, color: '#F5814C' },
    ]),
  ];
  export default {
    props: {
      params: {
        default: () => {
          return {};
        },
        typeof: Object,
      },
    },
    data() {
      return {
        myChart: null,
      };
    },

    watch: {
      params: {
        handler: function (params, oldVal) {
          const option = {
            title: {
              text: params.value,
              textStyle: {
                color: 'rgba(165, 178, 200, 1)',
                fontSize: 26,
                fontWeight: 'bolder',
                rich: {
                  a: {
                    fontSize: 10,
                    verticalAlign: 'bottom',
                    lineHeight: 0.5,
                    padding: [0, 0, 3, 3],
                  },
                },
              },
              subtext: params.statusText,
              subtextStyle: {
                color: '#A5B2C8',
                fontSize: 12,
              },
              itemGap: 0, // 主副标题距离
              left: 'center',
              top: 'center',
            },
            grid: {
              top: '0px',
              left: '0px',
              right: '0px',
              bottom: '0px',
            },
            radius: '100%',
            angleAxis: {
              max: 100, // 满分
              clockwise: false, // 逆时针
              // 隐藏刻度线
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
              splitLine: {
                show: false,
              },
            },
            radiusAxis: {
              type: 'category',
              // 隐藏刻度线
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
              splitLine: {
                show: false,
              },
            },
            polar: {
              center: ['50%', '50%'],
              radius: '150%', //图形大小
            },
            series: [
              {
                type: 'bar',
                data: [
                  {
                    name: '',
                    value: params.value,
                    itemStyle: {
                      color: colorMap[params.color],
                    },
                  },
                ],
                coordinateSystem: 'polar',
                roundCap: true,
                barWidth: 9,
                barGap: '-100%', // 两环重叠
                z: 2,
              },
              {
                // 灰色环
                type: 'bar',
                data: [
                  {
                    value: 100,
                    itemStyle: {
                      color: 'rgba(116, 160, 194, 1)',
                      shadowColor: 'rgba(116, 160, 194, .1)',
                      shadowBlur: 5,
                      shadowOffsetY: 2,
                    },
                  },
                ],
                coordinateSystem: 'polar',
                roundCap: true,
                barWidth: 9,
                barGap: '-100%', // 两环重叠
                z: 1,
              },
            ],
          };

          this.echartInit(option);
        },
        immediate: true,
        deep: true,
      },
    },
    created() {},

    methods: {
      // echarts初始化
      echartInit(option) {
        if (this.myChart) {
          this.myChart.setOption(option);
          return false;
        }

        this.$nextTick(() => {
          this.myChart = echarts.init(this.$refs.echartsBox);

          option && this.myChart.setOption(option);
          // 根据页面大小自动响应图表大小
          window.addEventListener('resize', () => {
            this.myChart.resize();
          });
        });
      },
    },
  };
</script>
<style lang="scss" src="./container.scss" scoped></style>
